<template>
  <div class="sheet-wrapper">
    <div class="sheet-header">{{ testDuration | formatSeconds }}</div>
    <div class="sheet-body">
      <div class="card-top">
        <div class="title">答题卡</div>
        <div class="number">
          <span>{{ topicIndex + 1 }}</span
          >/{{ testCount }}
        </div>
      </div>
      <div class="card-conter">
        <el-scrollbar>
          <div class="topic-wrapper">
            <div class="topic-status">
              <span class="theme"></span>
              <span class="text">已答</span>
              <span class="gray"></span>
              <span class="text">未答</span>
            </div>
            <div class="topic-view" v-for="(row, j) in testParts" :key="j">
              <div class="title">{{ row.title }}</div>
              <div class="list">
                <div class="col" v-for="(item, i) in row.value" :key="i">
                  <div
                    class="item"
                    @click="handleTopicJump(addNum(j) + i)"
                    :class="{
                      active:
                        testSheet[addNum(j) + i].has_answered == 1 && topicId != item.topic_id,
                      current: topicId == item.topic_id
                    }"
                  >
                    {{ addNum(j) + (i + 1) }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <div class="sheet-footer">
      <el-button type="primary" size="small" @click="clickSubmit" :loading="disabled"
        >提交答案</el-button
      >
    </div>
  </div>
</template>

<script>
/** 累加器 **/
const sum = (...arr) => [].concat(...arr).reduce((acc, val) => acc + val, 0)
import { mapState } from 'vuex'
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState({
      testCount: state => state.exam.test_count,
      testParts: state => state.exam.test_parts,
      testDuration: state => state.exam.test_duration,
      topicIndex: state => state.exam.topic_index,
      topicId: state => state.exam.topic_id,
      testSheet: state => state.exam.test_sheet
    })
  },
  methods: {
    // 计算答题卡试题编号
    addNum(i) {
      let numArr = this.testParts.map(item => item.value.length)
      let newArr = numArr.slice(0, i)
      return sum(newArr)
    },
    handleTopicJump(index) {
      this.$emit('click', index)
    },
    clickSubmit() {
      this.$emit('submit')
    }
  }
}
</script>

<style lang="scss" scoped>
.sheet-wrapper {
  padding: 0 10px 15px;
  .sheet-header {
    padding: 17px 0;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    @include edu-color-auxiliary;
  }
  .sheet-body {
    border-radius: 6px;
    border: 1px solid $border-color-wireframe;
    .card-top {
      padding: 0 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;
      background: #f7f7f7;
      border-radius: 6px 6px 0px 0px;
      .title {
        font-size: 16px;
        font-weight: 400;
        color: $text-color-import;
      }
      .number {
        font-size: 15px;
        font-weight: 400;
        color: $text-color-import;
        span {
          @include edu-color-auxiliary;
        }
      }
    }
    .card-conter {
      height: 296px;
      .el-scrollbar {
        height: 100%;
        ::v-deep .el-scrollbar__wrap {
          overflow-x: hidden;
        }
      }
      .topic-wrapper {
        padding: 15px 20px;
      }
      .topic-status {
        display: flex;
        align-items: center;
        justify-content: center;
        .theme,
        .gray {
          width: 16px;
          height: 16px;
          border-radius: 4px;
          box-sizing: border-box;
        }
        .theme {
          @include edu-color-primary(background-color);
        }
        .gray {
          margin-left: 14px;
          border: 1px solid #b7bac1;
        }
        .text {
          margin-left: 4px;
          font-size: 14px;
          font-weight: 400;
          color: $text-color-import;
        }
      }
      .topic-view {
        margin-top: 26px;
        .title {
          font-size: 14px;
          font-weight: 400;
          color: $text-color-import;
        }
        .list {
          display: flex;
          flex-wrap: wrap;
          margin-left: -7px;
          margin-right: -7px;
          .col {
            margin-top: 14px;
            padding: 0 7px;
          }
          .item {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: $text-color-import;
            font-size: 14px;
            font-weight: 400;
            border-radius: 4px;
            border: 1px solid #b7bac1;
            box-sizing: border-box;
            cursor: pointer;
            &.active {
              color: #ffffff;
              @include edu-color-primary(background-color);
              @include edu-color-primary(border-color);
            }
            &.current {
              @include edu-color-auxiliary;
              @include edu-color-primary(border-color);
              background-color: #ffffff;
            }
          }
        }
      }
    }
  }
  .sheet-footer {
    margin-top: 15px;
    .el-button {
      width: 100%;
    }
  }
}
</style>
